<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions">

    <body>
        <ui:composition template="/WEB-INF/templates/newMainCandidateTemplate.xhtml">
            <ui:define name="content">
                <h:outputStylesheet library="css" name="candidate/candidate.css"></h:outputStylesheet>
                <h:outputStylesheet library="css" name="candidate/candidate_desktop.css" media="screen and (min-width:1025px) and (max-width:1600px)"></h:outputStylesheet>
                <h:outputStylesheet library="css" name="candidate/candidate_desktop_wide.css" media="screen and (min-width : 1601px)"></h:outputStylesheet>
                <h:outputStylesheet library="css" name="candidate/candidate_tablet.css" media="screen and (min-device-width : 768px) and (max-device-width : 1024px), screen and (max-width:1024px)"></h:outputStylesheet>
                <h:outputStylesheet library="css" name="candidate/candidate_smartphone.css" media="screen and (min-device-width : 320px) and (max-device-width : 767px), screen and (max-width:767px)"></h:outputStylesheet>
                
                
                <h:form id="relocatingForm">
                    <p:panel id="provincesPanel" styleClass="noPaddingTopTitle noMargin noBorder marginTopBar" header="#{messages.ProvinceText}">
                            <p:dataTable  id="provinceTable" var="province"  value="#{newEditCandidateBean.selectedCountry.provinceList}" styleClass="table-no-select-all width100 tableHeaderWhite tableNoPadding bigFontTable"
                                          paginator="true" rows="10" paginatorPosition="bottom"
                                          paginatorTemplate="{PreviousPageLink} {PageLinks} {NextPageLink}"
                                          selection="#{newEditCandidateBean.provinceList}" rowSelectMode="add" rowKey="#{province.idProvince}" rendered="#{newEditCandidateBean.selectedCountry!=null}" >  
                                  <p:ajax event="rowSelect" update=":relocatingForm:provincesPanel" listener="#{newEditCandidateBean.addProvince()}"  />
                                  <p:ajax event="rowSelectCheckbox" update=":relocatingForm:provincesPanel" listener="#{newEditCandidateBean.addProvince()}"   />
                                  <p:ajax event="rowUnselect" update=":relocatingForm:provincesPanel"/>
                                  <p:ajax event="rowUnselectCheckbox" update=":relocatingForm:provincesPanel"/>
                                  <p:column selectionMode="multiple" style="width:4%;text-align: center;" >
                                      <f:facet name="header"> 
                                           <p:selectBooleanCheckbox  value="#{newEditCandidateBean.allProvinces}" >
                                               <p:ajax update=":relocatingForm:provincesPanel" listener="#{newEditCandidateBean.addProvince()}"/> 
                                           </p:selectBooleanCheckbox>
                                      </f:facet>                                           
                                  </p:column>

                                   <p:column styleClass="noPadding" style="width:95%;padding:0!important" >  
                                       <f:facet name="header">  
                                           <p:panel styleClass="textAlignLeft noPadding" rendered="#{newEditCandidateBean.selectedCountry!=null}">
                                               <h:outputText value="#{messages.All}" />  
                                           </p:panel>
                                       </f:facet>  
                                       <h:outputText value="#{province.description}"  />  
                                  </p:column>  
                            </p:dataTable>   
                        <p:commandButton value="#{messages.Add}" styleClass="grayBackgroundStrong" actionListener="#{newEditCandidateBean.addProvinces()}" action="#{newEditCandidateBean.reditectToRelocatingPanel()}"/>
                            <p:commandButton value="#{messages.Cancel}" styleClass="grayBackgroundStrong" action="#{newEditCandidateBean.reditectToRelocatingPanel()}"/>
                        </p:panel>                   
                </h:form>                
            </ui:define>
        </ui:composition>
         
    </body>
</html>
